import { Image, Text, View } from '@tarojs/components'
import React from 'react'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { connect } from 'react-redux'
import { AtButton, AtIcon } from 'taro-ui'
import logo from '../../images/logo.png'

export default class PaySuccess extends React.Component{

  goHome() {
    Taro.redirectTo({
      url: '/pages/index/index'
    })
  }

  render () {
    return (
      <View style='display: flex; justify-content: center; align-items: center; flex-direction: column; margin-top: 5rem;height: 100%'>
        <View style='width: 100%; text-align: center'>
          <AtIcon value='check-circle' size='64' color='#6190E8'></AtIcon>
          <View style='margin-top: 2rem;'>
            <Text>
              {(getCurrentInstance().router?.params.type === 'zudian') ? '支付成功，请及时取走电池' : '支付成功，请放入电池，完成换电后请及时取出电池'}
            </Text>
          </View>
        </View>
        <View style='margin-top: 2rem;'>
          <AtButton type='primary' onClick={this.goHome.bind(this)}>{(getCurrentInstance().router?.params.type === 'zudian')? '完成租电': '完成换电'}</AtButton>
        </View>
        <View style='display: flex;flex: 1;flex-direction: column;justify-content: space-around;padding-bottom: 1rem;'>
          <View style='text-align: center; color: #7f8c8d'>
            <View>
              如遇异常请拨打售后电话
            </View>
            <View style='margin-top: 1rem'>
              400-080-8019
            </View>
          </View>
          <Image
            mode='aspectFit'
            style='height: 3rem'
            src={logo}
          >
          </Image>
        </View>
        {/* <AtIcon prefixClass='fa' value='check-circle' size='30' color='#2980b9'></AtIcon> */}
        
      </View>
    )
  }
}